<template>
	<view class="page">
		<!-- 常见问题 start -->
		<view class="bg-white">
			<view class="text-xl text-bold text-black fu-help-title">常见问题</view>
			<view class=" fu-list" @click="goHelpDetail(item.id)" v-for="(item,index) in normalList" :key="item.id">
				<view class="fu-item solid-bottom">
					<text class="text-lg">{{item.title}}</text>
					<text class="fu-iconfont fu-text-24 text-gray"> &#xe82d; </text>
				</view>
			</view>
		</view>
		<!-- 常见问题 end -->

		<!-- 块之间的距离 -->
		<view class="fu-crowd-area"></view>

		<!-- 交易问题 start -->
		<view class="bg-white">
			<view class="text-xl text-bold text-black fu-help-title">交易问题</view>
			<view class="fu-list" @click="goHelpDetail(item.id)" v-for="(item,index) in transactionList" :key="item.id">
				<view class="fu-item solid-bottom ">
					<text class="text-lg">{{item.title}}</text>
					<text class="fu-iconfont fu-text-24 text-gray"> &#xe82d; </text>
				</view>
			</view>
		</view>
		<!-- 交易问题 end -->

		<!-- 块之间的距离 -->
		<view class="fu-crowd-area"></view>

		<!-- 图片区域 start -->
		<view class="bg-white fu-labour">
			<view class="margin-top-lg fu-labour-item" @click="callMobile(phone)">
				<image class="fu-labour-bg" :src="imgBaseUrl + 'index/phone.png'" mode="aspectFit" />
				<view class="fu-labour-text">
					<text class="text-white text-lg">电话服务</text>
					<text class="text-white text-sm">{{ phone }}</text>
				</view>
			</view>
			<view class="margin-top-lg margin-left-sm fu-labour-item" @click="onChat1()"  v-if="is_hidden!='1'">
				<image class="fu-labour-bg" :src="imgBaseUrl + 'index/msg.png'"  mode="aspectFit" />
				<view class="fu-labour-text">
					<text class="text-white text-lg">在线客服</text>
					<text class="text-white text-sm">{{ online }}</text>
				</view>
			</view>
		</view>
		<!-- 图片区域 end -->
	</view>
</template>

<script>
	/**
	 * @author 刘畅
	 */
	export default {
		name: 'Help',
		data() {
			return {
				phone: '400-123-1234', // {String} 电话服务
				online: '400-123-1234', //在线客服
				time: '9:00-18:00', // {String} 在线客服
				normalList: [], //常见问题
				transactionList: [], //交易问题
				is_hidden: 0
			}
		},
		onLoad() {
			this.get_column_article_list(25);
			this.get_column_article_list(26);
			this.getConfig();
		},
		onShow() {},
		methods: {
			getConfig() {
				this.$api.post(global.apiUrls.post60e561cd51d26, {
					code: 'operation'
				}).then(res => {
					if (res.data.code == 1) {
						this.phone = res.data.data.tel;
						this.online = res.data.data.time;
						this.is_hidden = res.data.data.is_hidden;
					}
				}).catch(err => {
					console.log(err);
				})
			},
			/**
			 * @event
			 * @description 去帮助详情页面
			 * @param {Numebr} type - 去往那个问题的详情
			 */
			goHelpDetail(type) {
				this.$urouter.navigateTo({
					url: '/pages/index/help/help-detail/index',
					params: {
						"id": type
					}
				})
			},
			/**
			 * @author dengdongfang
			 * @date 2021-5-24
			 * @description 获取帮助中心内容列表，后台说的，调用这个接口传死的id,25常见问题，26交易问题，后台不能删除，所以id是固定的
			 */
			get_column_article_list(id) {
				this.$api.post(global.apiUrls.get_column_article_list, {
					category_id: id,
					is_recommend: 0,
					type: 2
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						if (id == 25) {
							this.normalList = res.data.data.data;
						}
						if (id == 26) {
							this.transactionList = res.data.data.data;
						}
					}

				}).catch(err => {
					console.log(err);
				})
			},
			callMobile(val) {
				let platInfo = uni.getSystemInfoSync();
				if (platInfo.platform == 'android') {
					plus.android.requestPermissions(['android.permission.CALL_PHONE'], function(e) {
						if (e.deniedAlways.length > 0) { //权限被永久拒绝
							let Uri = plus.android.importClass("android.net.Uri");
							let Settings = plus.android.importClass("android.provider.Settings");
							let context = plus.android.runtimeMainActivity();
							let packageURI = Uri.parse("package:" + 'com.xinyuan.benben');
							let intent = plus.android.newObject("android.content.Intent", Settings
								.ACTION_APPLICATION_DETAILS_SETTINGS, packageURI);
							context.startActivity(intent);
							console.log('Always Denied!!! ' + e.deniedAlways.toString());
						}
						if (e.granted.length > 0) {
							if (val) {
								uni.makePhoneCall({
									phoneNumber: val,
								})
							}
						}
					})
				} else {
					if (val) {
						uni.makePhoneCall({
							phoneNumber: val,
						})
					}
				}
			},
			onChat1() {
				this.$urouter.navigateTo({
				  url: '/pages/service-message/service/service-detail/index',
				  params: {
				   kid: 0,
				   partner_id: 0
				  }
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		height: calc(100vh - 88rpx);
		background-color: #fff;
	}

	.fu-crowd-area {
		width: 100%;
		height: 20rpx;
		background-color: #F6F7F9;
	}

	// 帮助列表 start
	.fu-help-title {
		position: relative;
		line-height: 110rpx;
		padding-left: 52rpx;

		&::after {
			content: "";
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 32rpx;
			width: 6rpx;
			height: 28rpx;
			background-color: $bgtheme;
			border-radius: 4rpx;
		}
	}

	.fu-list {
		height: 110rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;

		.fu-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 110rpx;

			.fu-text-24 {
				font-size: 24rpx !important;
			}
		}
	}

	// 帮助列表 end

	// 人工客服 start
	.fu-labour {
		display: flex;
		padding-left: 32rpx;
		padding-right: 32rpx;

		.fu-labour-item {
			position: relative;
			width: 334rpx;
			height: 152rpx;

			.fu-labour-bg {
				width: 334rpx;
				height: 152rpx;
			}

			.fu-labour-text {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 40rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 92rpx;
			}
		}
	}

	// 人工客服 end
</style>
